<template>
  <section class="family-list">
    <view class="family-list__item" v-for="(item, index) in list" :key="index">
      <view class="family-list__content">
        <pane-card>
          <view slot="title">
            <view class="header">
              <text class="right">
                <text class="name">
                  {{item.xm}}
                </text>
                <text class="nl">
                  {{item.lxdh}}
                </text>
              </text> 
              <view class="operate">
                <button class="del" size="mini" @tap="delPerson(item.id)">删除</button>
                <button size="mini" @tap="editPerson(item)" type="primary">修改</button>
                <!-- <button type="primary" size="mini" class="operate-btn">预约体检</button> -->
              </view>
            </view>

          </view>
          <view slot="subtitle">
            <view class="content">
              <text class="label block">
                <text class="txt">{{item.zjhm}}</text>
              </text>
              <!-- <text class="label block">
                <m-icon color="#666666" type="phone" @click="clear"></m-icon>
                <text class="txt">{{item.phone}}</text>
              </text> -->
            </view>
          </view>
        </pane-card>
      </view>
    </view>
    <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
  </section>
</template>
<script>
  import Api from '@/api/main'
  import PaneCard from '@/components/m-card/pane-card.vue';
  import VEmpty from '@/components/v-empty/index.vue';
  export default {
    components: {
      VEmpty,
      PaneCard
    },
    data() {
      return {
        showEmpty: false,
        list: [
          // {
          //   id: 1,
          //   xm: '家人1',
          //   zjhm: '111'
          // },
          // {
          //   id: 2,
          //   xm: '家人1',
          //   zjhm : '111'
          // }
        ]
      }
    },
    methods: {
      goto(url) {
        uni.navigateTo({
          url: url
        })
      },
      // 查询信息列表
      async getUserList() {
        const res = await this.$http.post(Api.getUserList)
        console.log('res', res);
        this.list = res || []
        this.showEmpty = !this.list.length;
        console.log('showEmpty', this.showEmpty);
        return res
      },
      // 编辑信息
      editPerson(info) {
        console.log('edit-info', info);
        if (!info.id) {
          return  
        }
        uni.navigateTo({
          url: `/pages/user/information?id=${info.id}&risk=${info.risk}`
        });
      },
      // 删除信息
      async delPerson(id) {
        uni.showModal({
          title: '删除提示',
          content: '是否删除该条信息？',
          success: async res => {
            if (res.confirm) {
              console.log('用户点击确定' + id);
              const res = await this.$http.post(Api.deleteUserById, { id })
              if (res) {
                this.$toast('删除成功')
                this.getUserList()
              }
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
    },
    async onShow() {
      uni.showLoading({
        title: '加载中'
      });
      await this.getUserList()
      uni.hideLoading();
    }
  }
</script>
<style lang="scss">
  .family-list {
    width: 100%;
    padding: 0 40rpx;

    .header {
      height: 70rpx;
      display: flex;
      justify-content: space-between;

      .btn {
        color: $uni-color-primary;
        font-weight: 400;
      }
    }

    .home {
      font-size: 38rpx;
    }

    .idcard {
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      height: 80rpx;
      border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
    }

    .footer {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .btn {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 2.5;

        &-icon {
          width: 60rpx;
          height: 60rpx;
          font-size: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color: #fff;

          &.primary {
            background-color: $uni-color-primary;
          }

          &.success {
            background-color: $uni-color-success;
          }

          &.warning {
            background-color: $uni-color-warning;
          }

          &.error {
            background-color: $uni-color-error;
          }
        }

        text {
          font-size: 26rpx;
        }
      }

      .content {
        width: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    &__content  {
      .name {
        margin-right: 10rpx;
      }

      .operate {
        .del   {
          margin-right: 20rpx;
        }

      }
    }
  }

  button {
    padding: 0 17rpx !important;
    border-radius: 6rpx !important;
    box-shadow: none;
  }
</style>